// out: false,main:../fire_normal.less,main:../fire_dark.less
.filter-layer {
    z-index: 502;
    position: absolute;
    top: 10px;
    left: 330px;
    background: #fff;
    color: darken(#1e9fff, 30%);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    font-size: 0;
    white-space: nowrap;
    & > ul {
        display: flex;
        font-size: 15px;
        & > li {
            padding: 10px 11px 10px;
            position: relative;
            cursor: pointer;

            & > .item {
                display: flex;
                align-items: center;
                span {
                    font-size: 15px;
                    &.icon {
                        img {
                            width: 30px;
                        }
                        padding: 0 5px;
                    }
                    &.text {
                        font-weight: bold;
                    }
                }
                &.hide {
                    img {
                        filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
                        filter: gray; /* IE6-9 */
                        -webkit-filter: grayscale(
                            100%
                        ); /* Chrome 19+ & Safari 6+ */
                    }
                    & .text {
                        color: #ccc;
                    }
                    // & + .smenu {
                    //     ul{
                    //         li{
                    //             &>.dot{
                    //                 color:#ccc;
                    //                 padding:0 5px;
                    //                 font-size:8px;
                    //             }
                    //             color:#ccc;
                    //         }
                    //     }
                    // }
                }
            }
            & > .smenu {
                position: absolute;
                display: none;
                width: 100%;
                top: 50px;
                background: #fff;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
                border-radius: 4px;
                padding: 5px;
                & > ul {
                    & > li {
                        display: flex;
                        padding: 5px;
                        font-size: 14px;
                        align-items: center;
                        & > .dot {
                            color: #f00;
                            padding: 0 5px;
                            font-size: 8px;
                        }
                        &.hide {
                            & > .dot {
                                color: #ccc;
                                padding: 0 5px;
                                font-size: 8px;
                            }
                            color: #ccc;
                        }
                    }
                }

                // bottom:0;
            }
            &:hover {
                & .smenu {
                    display: block;
                }
            }
        }
    }
}
.custom-marker {
    position: absolute;
    top: 300px;
    left: 500px;
    z-index: 503;
    margin:0 !important;
    width:auto !important;
    height:auto !important;
    & p {
        & .layui-badge {
            margin: 2px;
            white-space: nowrap;
        }
        &.badge-box {
            position: absolute;
            bottom: -10px;
            display: flex;
        }
    }
}
